import VueRouter from 'vue-router'
import { enhance } from '@/utils'
import { Message } from 'element-ui'
// import Home from '@/pages/Home'
// import Search from '@/pages/Search'
// import Login from '@/pages/Login'
// import Register from '@/pages/Register'
import Vue from 'vue'

const Home = ()=>import("@/pages/Home");
const Search = ()=>import("@/pages/Search");
const Login = ()=>import("@/pages/Login");
const Register = ()=>import("@/pages/Register");
const NotFound = ()=>import("@/pages/NotFound");
const Study = ()=>import("@/pages/Study");
const Detail = ()=>import("@/pages/Detail");
const AddCart = ()=>import("@/pages/AddCart");
const Cart = ()=>import("@/pages/Cart");
const Trade = ()=>import("@/pages/Trade");
const Pay = ()=>import("@/pages/Pay");
const PayResult = ()=>import("@/pages/PayResult");

// import NotFound from '@/pages/NotFound'
// import Study from '@/pages/Study'
// import Detail from '@/pages/Detail'
// import AddCart from '@/pages/AddCart'
// import Cart from '@/pages/Cart'
// import Trade from '@/pages/Trade'
// import Pay from '@/pages/Pay'
// import PayResult from '@/pages/PayResult'
import store from '@/store'



// 2- 安装
Vue.use(VueRouter)
VueRouter.prototype.goSearch = function (query) {
  this.push({
    path: '/search',
    query: {
      ...this.history.current.query,
      pageNo: 1,
      ...query,
    },
  })
}
// 3
enhance('push')
enhance('replace')

const routes = [
  {
    // 首页
    path: '/',
    component: Home,
    meta: {
      isTypeNav: true,
      isFooterList: true,
    },
  },
  {
    // 搜索页
    path: '/search',
    component: Search,
    meta: {
      // noScroll:true,// 滚动条不变化
      isTypeNav: true,
      isFooterList: true,
    },
  },
  {
    path: '/login',
    name: 'lala',
    component: Login,
  },
  {
    path: '/register',
    component: Register,
  },
  {
    // 如果访问的地址为/home,那么会被重写向至/
    path: '/home',
    redirect: '/',
  },
  {
    // 当找不到匹配的路由时生效。
    path: '*',
    component: NotFound,
  },
  {
    path: '/study',
    component: Study,
  },
  {
    path: '/detail/:id',
    component: Detail,
    meta: {
      isScroll: true, // 希望滚动条横向以及纵向的值为0
      isTypeNav: true,
      isFooterList: true,
    },
  },
  {
    path: '/addCart',
    name: 'addCart',
    component: AddCart,
    meta: {
      isScroll: true, // 希望滚动条横向以及纵向的值为0
      isFooterList: true,
    },
  },
  {
    path: '/cart',
    component: Cart,
    meta: {
      isScroll: true, // 希望滚动条横向以及纵向的值为0
      isFooterList: true,
    },
  },
  {
    path: '/trade',
    component: Trade,
    meta: {
      isScroll: true, // 希望滚动条横向以及纵向的值为0
      isAuthor: true, //需要登录权限
      isPayment:true, //允许进入支付界面
    },
  },
  {
    path: '/pay/:orderId',
    component: Pay,
    meta: {
      isScroll: true, // 希望滚动条横向以及纵向的值为0
      isAuthor: true, // 需要登陆
      isPayment:true, //允许进入支付界面
    },
    //路由独享守卫
    beforeEnter(to, from, next){
      //如果来自交易页面
      if(from.meta.isPayment)next();
      else{
        Message.error('该页面不允许直接访问！')
        next('/cart')
      }
    }
  },
  {
    path: '/payResult',
    component: PayResult,
    meta: {
      isScroll: true, // 希望滚动条横向以及纵向的值为0
      isFooterList: true,
    },
  },
]
const router = new VueRouter({
  // 路由器
  routes,
  // 路由的模式
  mode: 'history',
  // 1- 接收的参数是什么：to,from
  // 2- 返回的是什么：对象
  // 3- 什么时候执行?答：当我的路由信息发生改变即会被调用。
  scrollBehavior(to, from) {
    // console.log("to",to);
    // console.log("from",from);
    if (to.meta.isScroll) {
      return {
        x: 0, // 横向滚动条
        y: 0, // 纵向滚动条
      }
    }
  },
})
//为了让所有路由都执行全局前置守卫
router.beforeEach(async function (to, from, next) {
  if (store.state.user.token) {
    await store.dispatch('user/getUserInfoAsync')
  }

  //判断是否需要验证权限
  if (to.meta.isAuthor) {
    //如果有token
    if (store.state.user.token) {
      //验证权限成功放行
      next()
    } else {
      //验证权限失败，返回登录页面
      Message.error('您未登录，请先登录！')
      next('/login')
    }
  } else {
    next()
  }
})
export default router
